<template>
  <view class="classroom-container">
    <!-- 视频播放区域 -->
    <view class="video-container">
      <video 
        id="classroomVideo"
        :src="courseInfo.videoUrl || ''" 
        controls
        autoplay
        class="classroom-video"
        @error="handleVideoError"
      ></video>
    </view>
    
    <!-- 课程信息 -->
    <view class="course-info">
      <view class="course-title">{{courseInfo.name || '加载中...'}}</view>
      <view class="teacher-info">
        <image class="teacher-avatar" :src="courseInfo.teacherAvatar || 'http://101.200.154.121:19000/teacher-manage-static/static/default-avatar.png'" mode="aspectFill"></image>
        <text class="teacher-name">{{courseInfo.teacherName || ''}}</text>
      </view>
    </view>
    
    <!-- 互动区域 -->
    <view class="interaction-area">
      <view class="tab-container">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', currentTab === tab.value ? 'active' : '']"
          @tap="switchTab(tab.value)"
        >
          {{tab.name}}
        </view>
      </view>
      
      <!-- 课程内容标签页 -->
      <view class="tab-content" v-if="currentTab === 'content'">
        <view class="chapter-list">
          <view 
            v-for="(chapter, index) in courseInfo.chapters" 
            :key="index"
            :class="['chapter-item', currentChapter === index ? 'active' : '']"
            @tap="switchChapter(index)"
          >
            <view class="chapter-info">
              <text class="chapter-title">{{chapter.title}}</text>
              <text class="chapter-duration">{{chapter.duration}}</text>
            </view>
            <view class="progress-bar">
              <view class="progress-inner" :style="{ width: chapter.progress + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 聊天标签页 -->
      <view class="tab-content" v-if="currentTab === 'chat'">
        <scroll-view class="chat-messages" scroll-y scroll-into-view="msg-bottom">
          <view class="message-list">
            <view 
              v-for="(message, index) in chatMessages" 
              :key="index"
              :class="['message-item', message.isSelf ? 'self' : '']"
            >
              <image class="message-avatar" :src="message.avatar" mode="aspectFill"></image>
              <view class="message-content">
                <view class="message-name">{{message.name}}</view>
                <view class="message-text">{{message.content}}</view>
              </view>
            </view>
            <view id="msg-bottom"></view>
          </view>
        </scroll-view>
        <view class="chat-input-area">
          <input type="text" v-model="chatInput" placeholder="请输入消息..." class="chat-input" />
          <button class="send-btn" @tap="sendMessage">发送</button>
        </view>
      </view>
      
      <!-- 问答标签页 -->
      <view class="tab-content" v-if="currentTab === 'qa'">
        <view class="qa-list">
          <view class="qa-item" v-for="(qa, index) in qaList" :key="index">
            <view class="qa-question">
              <text class="question-tag">问</text>
              <text class="question-text">{{qa.question}}</text>
            </view>
            <view class="qa-answer">
              <text class="answer-tag">答</text>
              <text class="answer-text">{{qa.answer}}</text>
            </view>
          </view>
        </view>
        <view class="qa-input-area">
          <input type="text" v-model="qaInput" placeholder="我要提问..." class="qa-input" />
          <button class="ask-btn" @tap="askQuestion">提问</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      courseId: '',
      courseInfo: {
        name: '',
        teacherName: '',
        teacherAvatar: '',
        videoUrl: '',
        chapters: [
          { title: '第1章 课程介绍', duration: '15:00', progress: 100 },
          { title: '第2章 基础知识', duration: '30:00', progress: 75 },
          { title: '第3章 实战演练', duration: '45:00', progress: 30 },
          { title: '第4章 高级技巧', duration: '25:00', progress: 0 },
          { title: '第5章 总结与拓展', duration: '20:00', progress: 0 }
        ]
      },
      currentTab: 'content',
      tabs: [
        { name: '课程内容', value: 'content' },
        { name: '实时聊天', value: 'chat' },
        { name: '问答', value: 'qa' }
      ],
      currentChapter: 0,
      // 聊天相关
      chatMessages: [
        { 
          name: '张老师', 
          content: '欢迎来到课堂，有任何问题可以在这里提问。', 
          avatar: '/static/teacher-avatar.png', 
          isSelf: false 
        },
        { 
          name: '系统', 
          content: '请注意课堂纪律，不要发布与课程无关的内容。', 
          avatar: '/static/system-avatar.png', 
          isSelf: false 
        }
      ],
      chatInput: '',
      // 问答相关
      qaList: [
        {
          question: '这个知识点在考试中会考到吗？',
          answer: '是的，这是重点内容，历年考试都有涉及。'
        },
        {
          question: '老师，能否再详细讲解一下这个公式的推导过程？',
          answer: '好的，我们可以从基本定理开始...(详细解答省略)'
        }
      ],
      qaInput: ''
    }
  },
  onLoad(options) {
    if (options.id) {
      this.courseId = options.id
      this.loadCourseInfo()
    }
  },
  methods: {
    loadCourseInfo() {
      // 这里应该调用API获取课程信息
      // 模拟数据
      setTimeout(() => {
        this.courseInfo = {
          name: '高中数学一对一辅导',
          teacherName: '张老师',
          teacherAvatar: '/static/teacher-avatar.png',
          videoUrl: 'https://example.com/video.mp4',
          chapters: this.courseInfo.chapters
        }
      }, 500)
    },
    switchTab(tabValue) {
      this.currentTab = tabValue
    },
    switchChapter(index) {
      this.currentChapter = index
      // 这里可以加载对应章节的视频
      uni.showToast({
        title: `正在切换到${this.courseInfo.chapters[index].title}`,
        icon: 'none'
      })
    },
    handleVideoError(e) {
      console.error('视频加载错误', e)
      uni.showToast({
        title: '视频加载失败，请检查网络连接',
        icon: 'none'
      })
    },
    sendMessage() {
      if (!this.chatInput.trim()) return
      
      // 添加用户消息
      this.chatMessages.push({
        name: '我',
        content: this.chatInput,
        avatar: '/static/user-avatar.png',
        isSelf: true
      })
      
      const userMessage = this.chatInput
      this.chatInput = ''
      
      // 模拟教师回复
      setTimeout(() => {
        this.chatMessages.push({
          name: '张老师',
          content: `收到你的消息: "${userMessage}"，稍后回复。`,
          avatar: '/static/teacher-avatar.png',
          isSelf: false
        })
        // 滚动到底部
        this.$nextTick(() => {
          const queryMsg = uni.createSelectorQuery().in(this)
          queryMsg.select('#msg-bottom').boundingClientRect(data => {
            if (data) {
              uni.pageScrollTo({
                scrollTop: data.top,
                duration: 100
              })
            }
          }).exec()
        })
      }, 1000)
    },
    askQuestion() {
      if (!this.qaInput.trim()) return
      
      // 添加用户问题
      this.qaList.push({
        question: this.qaInput,
        answer: '老师正在思考中...'
      })
      
      const userQuestion = this.qaInput
      this.qaInput = ''
      
      // 模拟教师回答
      setTimeout(() => {
        // 更新最后一个问题的答案
        this.qaList[this.qaList.length - 1].answer = `感谢提问"${userQuestion}"，这是一个很好的问题。我们会在课程中详细讲解这个内容。`
      }, 2000)
    }
  }
}
</script>

<style>
.classroom-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.video-container {
  width: 100%;
  height: 422rpx;
  background-color: #000;
}

.classroom-video {
  width: 100%;
  height: 100%;
}

.course-info {
  padding: 20rpx;
  background-color: #fff;
}

.course-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.teacher-info {
  display: flex;
  align-items: center;
}

.teacher-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
}

.teacher-name {
  font-size: 28rpx;
  color: #666;
}

.interaction-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  background-color: #fff;
  overflow: hidden;
}

.tab-container {
  display: flex;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4080FF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #4080FF;
}

.tab-content {
  flex: 1;
  overflow: hidden;
}

/* 课程内容样式 */
.chapter-list {
  height: 100%;
  overflow-y: auto;
}

.chapter-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.chapter-item.active {
  background-color: #f0f7ff;
}

.chapter-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.chapter-title {
  font-size: 28rpx;
  color: #333;
}

.chapter-duration {
  font-size: 24rpx;
  color: #999;
}

.progress-bar {
  height: 4rpx;
  background-color: #eee;
  border-radius: 2rpx;
}

.progress-inner {
  height: 100%;
  background-color: #4080FF;
  border-radius: 2rpx;
}

/* 聊天样式 */
.chat-messages {
  height: calc(100% - 100rpx);
  padding: 20rpx;
}

.message-list {
  display: flex;
  flex-direction: column;
}

.message-item {
  display: flex;
  margin-bottom: 20rpx;
}

.message-item.self {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin: 0 20rpx;
}

.message-content {
  max-width: 70%;
  background-color: #f1f1f1;
  border-radius: 10rpx;
  padding: 15rpx;
}

.message-item.self .message-content {
  background-color: #d1e5ff;
}

.message-name {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 5rpx;
}

.message-text {
  font-size: 28rpx;
  color: #333;
  word-break: break-all;
}

.chat-input-area {
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.chat-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.send-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #4080FF;
  color: #fff;
  border-radius: 35rpx;
  margin-left: 20rpx;
  font-size: 26rpx;
}

/* 问答样式 */
.qa-list {
  height: calc(100% - 100rpx);
  padding: 20rpx;
  overflow-y: auto;
}

.qa-item {
  margin-bottom: 30rpx;
}

.qa-question {
  display: flex;
  margin-bottom: 10rpx;
}

.question-tag {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 20rpx;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.question-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  padding: 5rpx 0;
}

.qa-answer {
  display: flex;
  margin-left: 50rpx;
}

.answer-tag {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: #4080FF;
  color: #fff;
  border-radius: 20rpx;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.answer-text {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  padding: 5rpx 0;
}

.qa-input-area {
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.qa-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.ask-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #4080FF;
  color: #fff;
  border-radius: 35rpx;
  margin-left: 20rpx;
  font-size: 26rpx;
}
</style> 